import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { List, Grid } from 'antd-mobile';
import { SelectWrapper } from './style'

class AvatarSelector extends Component {
    static propTypes = {
		selectAvatar: PropTypes.func.isRequired
	}

    constructor(props) {
		super(props)
		this.state = {}
	}

    handleSelectAvatar(elm) {
        this.setState(elm);
        this.props.selectAvatar(elm.text);
    }

    render() {
        const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra';
		const gridArray = avatarList.split(',').map(v => ({
            icon: require(`../../statics/avatar/${v}.png`),
            text: v
        }));
        const select = this.state.icon ?　
            (
                <SelectWrapper>
                    <span>已选择头像:</span>
                    <img src={this.state.icon} alt="" />
                </SelectWrapper>
            ) :
            '请选择头像'
        return (
            <div>
                <List renderHeader={() => select}>
                    <Grid
                        data={gridArray}
						columnNum={5} 
						onClick={elm => this.handleSelectAvatar(elm)}
                    />
                </List>
            </div>
        )
    }

}

export default AvatarSelector;